<template>
  <div id="container">
    <chartTitle :title="title"></chartTitle>
    <div class="group" v-if="tab">
      <div
        :class="btnActived == index + 1 ? 'active' : ''"
        @click="_tabClick(item, index + 1)"
        v-for="(item, index) in tabList"
        :key="index"
      >
        {{ item }}
      </div>
      <!-- <p class="date-wrap">
        <a-range-picker @change="onDateChange" v-model="rangeDate" size="small" dropdownClassName="daping-range-date">
          <a-icon slot="suffixIcon" type="calendar" />
        </a-range-picker>
      </p> -->
    </div>
    <div class="main" :id="id"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import chartTitle from '../chart-title/index.vue'
export default {
  components: {
    chartTitle
  },
  name: 'chart-line-shadow',
  props: {
    title: String,
    shadow: {
      type: Boolean,
      default: true
    },
    color: {
      type: Array,
      default: () => {
        return ['#00CBFF', '#D33C36', '#FF6600', '#F4CD28', '#00B67C', '#A3D804']
      }
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    tab: {
      type: Boolean,
      default: false
    },
    tabList: {
      type: Array,
      default: () => {
        return ['7天', '一个月']
      }
    }
  },
  data() {
    return {
      btnActived: 1,
      rangeDate: []
    }
  },
  computed: {
    id: function() {
      return `main-${Math.random()}`
    },
    chartData: function() {
      const obj = {
        xAxisData: [],
        seriesData: []
      }
      this.data.map(item => {
        obj.xAxisData.push(item.name)
        obj.seriesData.push(item.value)
      })
      return obj
    }
  },
  mounted() {
    setTimeout(() => {
      this.onInit()
    }, 3500)
  },
  updated() {
    setTimeout(() => {
      this.onInit()
    }, 1000)
  },
  methods: {
    _tabClick(name, index) {
      this.btnActived = index
      this.rangeDate = []
      this.$emit('tab-click', name, index)
    },
    onDateChange(date) {
      if (date.length > 0) {
        this.btnActived = 0
        this.rangeDate = date
        let startDate = date[0].format('YYYY-MM-DD')
        let endDate = date[1].format('YYYY-MM-DD')
        this.$emit('timeClick', { startDate: startDate, endDate: endDate })
      } else {
        // this.params.startDate = ''
        // this.params.endDate = ''
      }
    },
    onInit() {
      var chartDom = document.getElementById(this.id)
      var myChart = echarts.init(chartDom)
      var option

      option = {
        animationDuration: 4000,
        animationDurationUpdate: 2000,
        tooltip: {
          trigger: 'axis',
          formatter: params => {
            let data = params[0]
            return data.name + `<br>${'数量：' + data.value}`
          }
        },
        color: this.color,
        legend: {
          show: false
        },
        grid: {
          left: '8%',
          right: '5%',
          bottom: '18%',
          top: '5%',
          containLabel: false
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          data: this.chartData.xAxisData,
          axisLabel: {
            color: '#fff'
          },
          axisLine: {
            lineStyle: {
              color: '#306269'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(48, 98, 105, .2)'
            }
          }
        },
        series: [
          {
            name: this.title,
            type: 'line',
            stack: 'Total',
            showSymbol: false,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#00CBFF' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(255, 255, 255, 0)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            //设置平均值线
            markLine: {
              data: [
                {
                  type: 'average',
                  name: '平均值'
                }
              ]
            },

            data: this.chartData.seriesData
          }
        ]
      }

      option && myChart.setOption(option, true)
      window.addEventListener('resize', () => {
        this.$nextTick(() => {
          myChart.resize()
        })
      })
    }
  }
}
</script>

<style lang="less">
@keyframes lineMove {
  0% {
    width: 0;
  }
  100% {
    width: 90%;
  }
}

#container {
  width: 100%;
  height: 26.4vh;
  color: #fff;
  background-color: rgba(7, 38, 46, 0.2);
  // border: 1px solid rgba(194, 215, 253, .2);
  display: flex;
  flex-flow: column;
  background-color: rgba(9, 23, 68, 0.5);
  border: 1px solid #1438ab;
  border-top: none;
  .main {
    flex: 2;
  }
  .group {
    display: flex;
    padding: 10px 10px 0 10px;

    div {
      min-width: 7vh;
      padding: 0 10px;
      height: 2.777vh;
      display: flex;
      justify-content: center;
      align-items: center;
      // background-image: url(../../../assets/daping/components/defaultBtn.png);
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
      font-size: 1.48vh;
      color: #fff;
      cursor: pointer;
      margin-right: 5px;
      background-color: #152e69;
      border-radius: 2px;
    }
    .date-wrap {
      width: 260px;
      // background-color: rgba(0, 203, 255, .2);
      //   background-image: url(image/date-wrap.png);
      background-size: 100% 100%;

      .ant-calendar-range-picker-input {
        &::placeholder {
          color: #fff;
        }
      }

      .ant-calendar-picker-icon {
        color: #fff !important;
      }

      .ant-calendar-picker {
        width: 100%;
      }

      .ant-calendar-range-picker-separator {
        color: #fff;
      }

      .ant-input {
        background-color: transparent;
        border: 0;
        color: #fff;
        background-color: #152e69;
        border: none;
        height: 80%;
      }

      .ant-calendar-picker-icon {
        color: #fff;
      }
    }
    .active {
      // background-image: url(../../../assets/daping/components/activeBtn.png);
      color: #fff;
      background-color: #316110;
      font-weight: bold;
      border: 1px solid #7dc94e;
    }
  }
}
.daping-range-date {
  border: 1px solid #006ba3;
  background: rgba(0, 42, 78, 0.9);
  // background-color: rgba(0, 20, 26, .9);
  box-shadow: 0 0 5px #006ba3;
  top: 280px !important;

  // border-radius: 4px;
  .ant-calendar-input-wrap {
    display: none;
  }

  .ant-calendar-date {
    color: #fff;
  }

  .ant-calendar {
    background-color: transparent;
    margin: 0;
    border: 0;
  }

  .ant-calendar-next-month-btn-day {
    .ant-calendar-date {
      color: rgba(255, 255, 255, 0.3) !important;
    }
  }

  .ant-calendar-column-header {
    color: #fff;
  }

  .ant-calendar-input {
    background-color: transparent !important;
    border: 0 !important;
  }

  .ant-calendar-year-select,
  .ant-calendar-month-select {
    color: #fff !important;
  }

  .ant-calendar-next-year-btn,
  .ant-calendar-next-month-btn {
    &:hover {
      &::before,
      &::after {
        border-color: #fff !important;
      }
    }
  }

  .ant-calendar-month-panel-header,
  .ant-calendar-month-panel-body,
  .ant-calendar-year-panel-header,
  .ant-calendar-year-panel-body {
    background-color: rgba(0, 20, 26, 0.9);
  }

  .ant-calendar-disabled-cell .ant-calendar-date {
    background-color: #eee;
    color: #ccc !important;
  }

  .ant-calendar-month-panel-year-select-content,
  .ant-calendar-year-panel-decade-select-content,
  .ant-calendar-month-panel-month,
  .ant-calendar-year-panel-year {
    color: #fff;
  }

  .ant-calendar-in-range-cell {
    background-color: rgba(0, 67, 128, 0.4) !important;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    margin: 1px 0;

    &::before {
      background-color: unset !important;
    }
  }

  .ant-calendar-selected-start-date {
    background-color: #007ff6;
    border-radius: 45% 0 0 45%;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    box-sizing: border-box;

    .ant-calendar-date {
      border-radius: 45% 0 0 45%;
    }
  }

  .ant-calendar-selected-end-date {
    background-color: #1890ff;
    border-radius: 0 45% 45% 0;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    box-sizing: border-box;

    .ant-calendar-date {
      border-radius: 0 45% 45% 0;
    }
  }
  .ant-calendar-picker-clear {
    background: transparent;
    color: #1890ff;
  }

  .ant-calendar-cell {
    .ant-calendar-date {
      &:hover {
        color: #000;
      }
    }
  }

  .ant-calendar-range-part {
    padding: 0 30px;
  }

  .ant-calendar-range-left {
    padding-right: 22px !important;
  }

  .ant-calendar-range-right {
    padding-left: 22px !important;
  }

  .ant-calendar-prev-year-btn {
    left: -25px;

    &:hover {
      &:after {
        border-color: #fff;
      }

      &:before {
        border-color: #fff;
      }
    }
  }

  .ant-calendar-prev-month-btn {
    left: 0;
    color: #fff;

    &:hover {
      &:after {
        border-color: #fff;
      }

      &:before {
        border-color: #fff;
      }
    }
  }

  .ant-calendar-next-year-btn {
    right: -25px;

    &:hover {
      &:after {
        border-color: #fff;
      }

      &:before {
        border-color: #fff;
      }
    }
  }

  .ant-calendar-next-month-btn {
    right: 0;

    &:hover {
      &:after {
        border-color: #fff;
      }

      &:before {
        border-color: #fff;
      }
    }
  }
}
</style>
